<template>
  <div class="topBar">
    <div class="top">
      <div class="left">
        <img
          src="https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/8db7d0f8978fcfd464f665b2ed7a54a2.png"
          alt=""
        />
      </div>
      <div class="right">
        <input
          type="text"
          placeholder="请输入关键字"
          autocomplete="off"
          class="input-search"
        />
        <input type="submit" class="search-btn" value="搜 索" />
      </div>
    </div>
    <div class="bottom">
      <ul>
        <li v-for="item in NavList" :key="item.id" :class="item.className">
          <a href="#">{{ item.title }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopBar",
  data() {
    return {
      NavList: [
        { id: "001", title: "首页", className: "normal" },
        { id: "002", title: "模拟考试", className: "normal" },
        { id: "003", title: "找驾校", className: "normal" },
        { id: "004", title: "驾考圈", className: "normal" },
        { id: "005", title: "交通标志", className: "normal" },
        { id: "006", title: "软件下载", className: "normal" },
        { id: "007", title: "驾考宝典企业版", className: "maxNormal" },
        { id: "008", title: "智慧驾校", className: "normal" },
        { id: "009", title: "买新车", className: "normal" },
        { id: "010", title: "二手车", className: "normal" },
      ],
    };
  },
};
</script>

<style scoped>
.top {
  display: flex;
  justify-content: space-between;
  height: 106px;
  align-items: center;
  padding: 0 10%;
}
.input-search {
  height: 42px;
  width: 220px;
  line-height: 40px;
  border: 1px solid #e9e9e9;
  font-size: 14px;
  padding: 0 40px 0 10px;
}
.search-btn {
  height: 43px;
  width: 50px;
  line-height: 40px;
  border: 1px solid #e9e9e9;
  font-size: 14px;
  padding: 0 40px 0 10px;
}
.bottom {
  padding: 0 10%;
  height: 50px;
  background-color: #37b5f8;
}
.bottom ul {
  display: flex;
  line-height: 50px;
}
.bottom ul li {
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.bottom ul li a {
  color: #fff;
}
.bottom ul li:hover {
  background-color: #54c0f9;
}
.normal {
  width: 108px;
  height: 100%;
}
.maxNormal {
  width: 148px;
  height: 100%;
}
.bottom ul li:first-child {
  background-color: #258fc7;
}
</style>
